<template>
	<view class="u-demo-block content">
		<view style="width:100%;height:70rpx;display: flex;justify-content: space-between;align-items: center;">
			<view class="header" @click="selectAddress"
				:style="{paddingTop:navBarTop + 'px',height:navBarHeight + 'px',lineHeight:navBarHeight + 'px'}">
				<text>约课</text>
			</view>
			<u--image :showLoading="true" src="../../../static/qrcode.png" width="38rpx" height="38rpx"
				radius="0"></u--image>
		</view>
		<u-swiper :list="swipers" @change="e => current = e.current" :autoplay="false" :radius="15" :height="178"
			keyName="image">
			<view slot="indicator" class="indicator">
				<view class="indicator__dot" v-for="(item, index) in swipers" :key="index"
					:class="[index === current && 'indicator__dot--active']">
				</view>
			</view>
		</u-swiper>
		<!-- <u-gap bgColor="transparent" height="15"></u-gap> -->
		<view class="navsBody">
			<view v-for="(item,index) in navs" :key="index" @click="linkUrl(item.url)">
				<u--image :showLoading="true" :src="item.img" width="88rpx" height="88rpx"></u--image>
				<text>{{item.title}}</text>
			</view>
		</view>
		<view class="message_Flex">
			<view>
				<u--image :showLoading="true" src="../../../static/Home/gb.png" width="38rpx" height="38rpx"></u--image>
				<text>老带新送课活动！！！</text>
			</view>
			<view>
				<view class="yuan"></view>
				<u--image :showLoading="true" src="../../../static/more.png" width="38rpx" height="38rpx"></u--image>
			</view>
		</view>
		<view class="listsBody">
			<u-cell-group :border="false">
				<u-cell :icon="require('../../../static/solid.png')" size="40" title="课程套餐" value=""
					:border="false"></u-cell>
			</u-cell-group>
			<view class="listsItem">
				<view v-for="(item,index) in lists" :key="item.id" class="listsVfor"
					@click="linkUrl(`/pages/detail/Tutorial_details?id=${item.id}`)">
					<view class="listsTop">
						<u--image :showLoading="true" :src="item.image" width="158rpx" height="156rpx"
							radius="0"></u--image>
						<view class="lists_right">
							<view class="lists_">
								<view>
									<view class="lists_name">
										<text>{{item.name || ''}}{{item.type == 1 ? '正式课' : '试听课'}}{{`${item.time_num || 0}分钟`}}</text>
									</view>
								</view>
							</view>
							<view class="lists_illustrate">
								<u--image :showLoading="true" src="../../../static/vip.png" width="30rpx" height="24rpx"
									radius="0"></u--image>
								<text>会员卡</text>
							</view>
							<view class="NewFlex">
								<text>￥{{item.salesprice || ''}}</text>
								<view class="listBottom">
									<u-button text="查看" shape="circle"></u-button>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<ShowBand></ShowBand>
		</view>
		<u-popup :show="IShow" @close="IShow = false" @open="IShow = true" mode="center" round="20">
			<view class="popupBody">
				<text class="title">联系我们</text>
				<image src="../../../static/logo.png" mode="widthFix"></image>
				<text class="title">扫码添加客服微信</text>
				<view class="view">
					<u--image :showLoading="true" src="../../../static/logo.png" width="40rpx" height="40rpx"
						radius="0"></u--image>
					<text>18569511740</text>
				</view>
				<u-icon size="35" name="close-circle-fill" color="#fff" style="margin:0px auto;"
					@click="IShow = false"></u-icon>
			</view>
		</u-popup>
		<u-popup :show="show" @close="show = false" @open="show = true" mode="center" round="20">
			<view class="NewpopupBody">
				<text class="title">快去完成测试吧</text>
				<text class="content_text">展示独一无二的你，让老师留下深刻印象吧</text>
				<view class="but_flex">
					<button class="leftButton">稍后再说</button>
					<button class="rightButton">立即测试</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	import {
		userinfo
	} from '../../../api/Mine.js';
	import {
		banner,
		getList
	} from '../../../api/Home.js';
	import ShowBand from "../../compontent/showBand.vue";
	export default {
		components: {
			ShowBand
		},
		data() {
			return {
				current: 0,
				IShow: false,
				show: false,
				swipers: [],
				noticesObj: {},
				lists: [],
				commentLists: [], //评论列表
				navBarTop: null,
				navBarHeight: null,
				navs: [{
					img: '../../../static/nav1.png',
					title: '预约课程',
					url: '/pages/Mine/Schedule_courses'
				}, {
					img: '../../../static/nav2.png',
					title: '我的预约',
					url: '/pages/Mine/Schedule_courses'
				}, {
					img: '../../../static/nav3.png',
					title: '我的会员卡',
					url: '/pages/Mine/MyVip'
				}, {
					img: '../../../static/nav4.png',
					title: '教材课件',
					url: '/pages/Mine/Course_classification'
				}],
				info: {}
			}
		},
		watch: {},
		onLoad(option) {
			console.log(option)
			if (option.token) {
				uni.setStorageSync('token', option.token);
				this.userinfo()
			}
		},
		onUnload() {},
		onReachBottom() {},
		onShow(option) {
			this.banner();
			this.getList();
		},
		methods: {
			/**
			@method 首页轮播图
			**/
			async banner() {
				try {
					const res = await banner({
						group: 'index'
					});
					this.swipers = [...res.data];
				} catch (err) {
					//TODO handle the exception
					console.log(err);
				}
			},
			/**
			@method 首页轮播图
			**/
			async getList() {
				try {
					const res = await getList({
						shop_id: 1
					});
					this.lists = [...res.data];
				} catch (err) {
					//TODO handle the exception
					console.log(err);
				}
			},
			async userinfo() {
				try {
					const res = await userinfo({});
					this.info = res.data
					if (res.data.level_id == 0) {
						uni.reLaunch({
							url: '/pages/Login/Registration_Problems'
						});
					}
				} catch (err) {
					//TODO handle the exception
					console.log(err);
				}
			},
			linkUrl(e) {
				uni.navigateTo({
					url: e
				});
			}
		}
	}
</script>
<style>
	page {
		width: 100%;
		min-height: 100vh;
		background-color: #f6f6f6;
		background-image: url('../../../static/back.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}
</style>
<style lang="scss" scoped>
	.indicator {}

	.header {
		width: 100%;
		z-index: 9999999;
		position: relative;
		// background-color: red;
		display: flex;
		align-items: center;

		text {
			margin-left: 10rpx;
			color: #333;
			font-size: 28rpx;
			letter-spacing: 2rpx;
		}
	}

	.NewpopupBody {
		width: 550rpx;
		height: auto;
		padding-top: 50rpx;
		padding-bottom: 50rpx;
		background-color: transparent;

		.title {
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 36rpx;
			color: #333333;
			display: block;
			text-align: center;
		}

		.content_text {
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #999999;
			display: block;
			text-align: center;
			padding-top: 30rpx;
			padding-bottom: 30rpx;
		}

		.but_flex {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.leftButton {
				width: 40%;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 32rpx;
				color: #333333;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 50rpx;
				background-color: #efefef;
			}

			.rightButton {
				width: 40%;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 32rpx;
				color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 50rpx;
				background-color: #267fff;
			}
		}
	}

	.popupBody {
		width: 550rpx;
		height: 460rpx;
		padding-top: 40rpx;
		padding-bottom: 40rpx;
		background-color: transparent;

		.view {
			display: flex;
			align-items: center;
			justify-content: center;

			text {
				color: 25rpx;
			}
		}

		/deep/ .u-icon {
			display: flex;
			justify-content: center;
			margin-top: 50rpx !important;
		}

		.title {
			display: block;
			text-align: center;
			margin: 0px auto;
			margin-bottom: 20rpx;
			font-size: 32rpx;
		}

		image {
			width: 50%;
			height: 400rpx;
			display: block;
			margin: 0px auto;
			border-radius: 20rpx;
			margin-bottom: 30rpx;
		}

		button {
			margin: 0px auto;
			width: 100%;
			height: 80rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 30rpx;
			border-radius: 50rpx;
			border: none;
			background-color: #fedc01;
			color: #333;
			font-weight: 500;
			margin-top: 20rpx;
		}
	}

	.message_Flex {
		width: 92%;
		height: auto;
		margin: 0px auto;
		background-image: url('../../static/Home/gb.png');
		border-radius: 20rpx;
		height: 50px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 10rpx;
		padding: 0 40rpx;

		view {
			display: flex;
			align-items: center;
			margin-left: 30px;

			text {
				font-size: 28rpx;
				color: #4D5962;
				margin-left: 30rpx;
			}

			.yuan {
				width: 14rpx;
				height: 14rpx;
				background: #2581FF;
				border-radius: 50%;
				margin-right: 10rpx;
			}
		}
	}

	.content {
		width: 95%;
		margin: 0rpx auto;
		padding: 0rpx;

		/deep/ .u-cell__value {
			color: #a8a8a8;
		}

		.navsBody {
			width: 100%;
			margin: 0px auto;
			border-radius: 20rpx;
			// background-color: #fff;
			display: flex;
			align-items: center;
			// border:1px solid red;
			justify-content: space-between;
			padding: 20rpx 0rpx 20rpx 0rpx;
			margin-top: 30rpx;

			/deep/ .u-image {
				display: block;
				margin: 0px auto;
			}

			view {
				width: 100%;

				// border:1px solid red;
				image {
					width: 50rpx;
					height: 50rpx;
					display: block;
					margin: 0px auto;
				}

				text {
					font-size: 28rpx;
					text-align: center;
					display: block;
					margin: 0px auto;
					margin-top: 5rpx;
					letter-spacing: 1px;
				}
			}
		}

		.listsBody {
			width: 100%;
			margin: 0px auto;
			border-radius: 24rpx;
			margin-top: 20rpx;
			padding: 0rpx 0rpx 0rpx 0rpx;
			background-color: transparent;

			/deep/ .u-cell__body {
				padding: 20rpx 20rpx 20rpx 20rpx;
			}

			/deep/ .u-cell__title-text {
				font-size: 36rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
			}

			.listsItem {
				.listsVfor {
					width: 95%;
					margin: 0px auto;
					margin-bottom: 30rpx;
					padding-bottom: 30rpx;
					background-color: #fff;
					padding-top: 30rpx;
					padding-left: 30rpx;
					border-radius: 32rpx;

					.listsTop {
						width: 100%;
						display: flex;
					}

					image {
						width: 190rpx;
						min-width: 190rpx;
						height: 200rpx;
						border-radius: 15rpx;
					}

					.lists_right {
						width: 70%;
						padding-left: 20rpx;

						// border:1px solid greenyellow;
						.lists_ {
							width: auto;
							// border:1px solid red;
							display: flex;
							align-items: center;
							justify-content: space-between;

							.listsAddress {
								text {
									display: block;
									font-size: 20rpx;
									color: #b5b5b5;
									text-align: right;
									margin-bottom: 5rpx;
								}
							}
						}

						.lists_name {
							display: flex;
							align-items: center;
							margin-bottom: 10rpx;

							text {
								font-size: 28rpx;
								font-weight: 500;
								color: #000000;
							}
						}

						.lists_tag {
							display: flex;
							align-items: center;
							margin-top: 15rpx;

							/deep/ .u-tag--warning--plain {
								border-color: #c3c3c3;
								margin-right: 20rpx;
							}

							/deep/ .u-tag--mini {
								margin-right: 20rpx;
							}

							/deep/ .u-tag-wrapper {
								margin-right: 10rpx;
							}
						}

						.lists_illustrate {
							width: 80%;
							font-size: 24rpx;
							display: flex;
							align-items: center;
							color: #888888;

							text {
								padding-left: 10rpx;
							}
						}

						.u_flex {
							margin-top: 5rpx;

							view {
								text {
									color: #000000;
									display: block;
									font-size: 24rpx;
									font-weight: 500;
									margin-left: 10rpx;
									margin-bottom: 5rpx;
								}
							}
						}

						.NewFlex {
							display: flex;
							align-items: center;
							justify-content: space-between;
							margin-top: 30rpx;

							text {
								color: #029CFE;
								font-family: PingFangSC, PingFang SC;
								font-weight: 600;
								font-size: 28rpx;
								text-align: left;
								font-style: normal;
							}
						}
					}
				}
			}

			.listBottom {
				/deep/ .u-button {
					width: 165rpx;
					height: 60rpx;
					margin: 0px;
					color: #fff;
					background-color: #2381fe;
					border: none;
					font-size: 20rpx;
					letter-spacing: 1px;
				}
			}
		}

		.listsevaluate {
			width: 100%;
			background-color: #fff;
			background: linear-gradient(180deg, #E3F2FF 0%, #FFFFFF 20%);
			margin: 0px auto;
			border-radius: 24rpx;

			/deep/ .u-cell__body {
				padding: 20rpx 20rpx 20rpx 20rpx;
			}

			.evaluateItem {
				width: 95%;
				margin: 0px auto;
				margin-bottom: 40rpx;
				padding-bottom: 30rpx;
			}

			.hadersFlex {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.hadersAvatar {
					display: flex;
					align-items: center;

					.view {
						margin-left: 10rpx;

						text {
							font-size: 28rpx;
							margin-bottom: 5rpx;
							display: block;
						}
					}
				}

				.time {
					color: #c1c1c1;
					font-size: 24rpx;
				}
			}

			.evaluateTag {
				display: flex;
				align-items: center;
				margin-top: 15rpx;
				margin-bottom: 15rpx;

				/deep/ .u-tag__text {
					font-size: 20rpx;
				}

				text {
					font-size: 25rpx;
					color: #a6a8a7;
					border-color: "#f6f4f4";
					background-color: #f6f4f4;
					margin-right: 20rpx;
					font-size: 24rpx;
					// shape="circle" bgColor="#f6f4f4" color="#a6a8a7"
					// 		borderColor="#f6f4f4" style="margin-right:20;" size="mini"
				}
			}

			.evaluate {
				font-size: 29rpx;
				letter-spacing: 2rpx;
			}

			.evaluate_Image {
				display: flex;
				// justify-content: space-between;
				margin-top: 20rpx;
				margin-bottom: 20rpx;

				/deep/ .u-image {
					margin-right: 10rpx;
				}
			}

			.TA {
				width: auto;
				padding: 5rpx 10rpx 5rpx 10rpx;
				display: flex;
				align-items: center;
				background-color: #e7f3ff;
				border-radius: 10rpx;
				margin-bottom: 20rpx;
				display: inline-block;

				text {
					font-size: 25rpx;
					color: #2a89e3;
				}

				view {
					display: flex;
					align-items: center;
				}

				.name {
					margin-left: 5rpx;
				}
			}

			.record {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;

				text {
					font-size: 25rpx;
					color: #b6b6b6;
				}

				.record_view {
					display: flex;
					align-items: center;

					.r {
						margin-right: 50rpx;
						// border:1px solid red;
					}

					view {
						display: flex;
						align-items: center;

						text {
							margin-left: 10rpx;
						}
					}
				}
			}
		}
	}

	.indicator-num {
		padding: 2px 0;
		background-color: rgba(0, 0, 0, 0.35);
		border-radius: 100px;
		width: 35px;
	}
</style>